<template>
<n-space vertical>
	<n-space>
		<n-button type="success" @click="doGen">生成</n-button>
	</n-space>
	<n-space class="w-full" item-style="flex:1">
		<n-space item-style="width:100%">
			<n-card>
				<template #header>
					<div @click="()=>showVal=!showVal" class="cursor-pointer">模版变量</div>
				</template>
				<n-collapse-transition :show="showVal">
					<codemirror  v-model:modelValue="templateTestDto.paramStr" placeholder="请输入代码..." :style="{ height: '200px' }"
				:autofocus="true" :indent-with-tab="true" :tab-size="2" :extensions="extensionsVal"  />
				</n-collapse-transition>
			</n-card>
			<n-card >
				<template #header>
					<div @click="()=>showCode=!showCode" class="cursor-pointer">模版代码</div>
				</template>
				<n-collapse-transition :show="showCode">
					<codemirror  v-model:modelValue="templateTestDto.code" placeholder="请输入代码..." :style="{ height: '400px' }"
				:autofocus="true" :indent-with-tab="true" :tab-size="2" :extensions="extensionsCode"  />
				</n-collapse-transition>
			</n-card>

		</n-space>
		<n-card title="生成信息" >
			<codemirror  v-model:modelValue="buildCode" placeholder="蓄势待发" :style="{ height: '600px' }" disabled
				:autofocus="true" :indent-with-tab="true" :tab-size="2" :extensions="extensionsCode"  />
		</n-card>
	</n-space>
</n-space>
</template>

<script  setup lang='ts' >
import { ref } from 'vue';
import { TemplateTestDto } from "./index";
import { Codemirror } from 'vue-codemirror'
import { json } from '@codemirror/lang-json'
import { javascript } from '@codemirror/lang-javascript'

import { featchTemplateTestOnline } from "@/service/api/templateManage/index"

const showVal = ref<boolean>(true);
const showCode = ref<boolean>(true);
const extensionsVal = [json()]
const extensionsCode = [javascript()]

const templateTestDto = ref<TemplateTestDto>({param:{},code:'public static void main(String[] args){\n  System.out.println("${test}")\n}',paramStr:'{"test":"Hello World"}'})
const buildCode = ref<string>("");

async function doGen(){
	const templateTestDtoVal = templateTestDto.value
	if(!templateTestDtoVal.code){
		window.$message?.error("模版代码不能为空！")
		return
	}
	if(templateTestDtoVal.paramStr){
		try{
			templateTestDtoVal.param = JSON.parse(templateTestDtoVal.paramStr)
		}catch(e){
			window.$message?.error("模版变量格式不正确！")
			return
		}
	}
	console.info(templateTestDtoVal)
	const { data,error } = await featchTemplateTestOnline(templateTestDtoVal)
	if(!error){
		buildCode.value = data
	}
}
</script>

<style lang='scss' scoped>

</style>
